<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Introduction to Tcl/Tk</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Tcl Tk, programming, Linux, Introduction, learn Tcl/Tk">
<meta name="description" content="This part of the Tcl/Tk tutorial is an introduction to Tcl/Tk.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to Tcl/Tk</h1>

<p>
In this part of the Tcl/Tk tutorial, we will introduce the Tk toolkit and
create our first programs.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
The purpose of this tutorial is to get you started with the Tk toolkit with the
Tcl language. Images used in this tutorial can be downloaded <a href="/img/gui/tcltk/images.zip">here</a>. 
I used some icons from the Tango icons pack of the Gnome project. 
</p>

<h2>Tk</h2>

<p>
<b>Tk</b> is an open source, cross-platform widget toolkit that 
provides a library of basic elements for building a graphical user interface (GUI).
The first public release of Tk was in 1991. Tk is an extension for the Tcl language. 
This means that Tk extends the Tcl language with additional commands for 
building user interfaces. There are bindings for several other languages including Ada, Perl, 
Ruby, Python or Common Lisp. The Tk library is often referred with its main
language as Tcl/Tk.
</p>


<h2>Tcl</h2> 
 
<p> 
<b>Tcl</b> is a string based scripting language. The source code is compiled into bytecode, which
is later interpreted by the Tcl interpreter. It was created by <b>John Osterhout</b>
in 1988. The purpose was to create a language which is easily embeddable into 
applications. But it is often used outside its original area. The language  is commonly 
used for rapid prototyping, scripted applications, GUIs and testing. 
The Tcl stands for tool command language, where
the source code of a Tcl script consists of commands. 
</p> 
 
<p> 
Tcl is a procedural language. It has some functional features. OOP support is planned
for the next official release. 
</p> 
 
<p> 
The official web site for both Tcl and Tk is <a href="http://tcl.tk">tcl.tk</a> 
</p> 


<h2>Simple example</h2>

<p>
In our first example, we will show a basic window on the screen. 
</p>

<pre class="code">
#!/usr/bin/wish

frame .fr

wm title . Simple
wm geometry . 250x150+300+300
</pre>

<p>
While this code is very small, the application window can do quite a lot. 
It can be resized, maximized, minimized. All the complexity that comes 
with it has been hidden from the application programmer. 
</p>

<pre class="explanation">
#!/usr/bin/wish
</pre>

<p>
The <code>wish</code> is a Tcl/Tk interpreter. It understands both
Tcl and Tk commands. 
</p>

<pre class="explanation">
frame .fr   
</pre>

<p>
The <code>frame</code> widget is created. The frame is a Tk command to 
create a frame widget. The argument to the command is the widget path name.
The widget path name begins with a dot character. This character stands for
the main application window. In Tk widgets form a hierarchy. The .fr
means that the frame widget is placed inside the main application window.
Widget path is a string starting with a dot and consisting of several names 
separated by dots. These names are widget names that comprise widget's hierarchy.
</p>

<pre class="explanation">
wm title . Simple
</pre>

<p>
The <code>wm</code> command is used to interact with a window manager. 
This code line sets a window title.
</p>

<pre class="explanation">
wm geometry . 250x150+300+300
</pre>

<p>
Here we set the size for the window and place it on the screen. The
first two numbers specify the width and height of the window. The third
and fourth parameters are the x, y coordinates on the monitor screen.
</p>

<img src="/img/gui/tcltk/simple.png" alt="Simple">
<div class="figure">Figure: Simple window</div>



<h2>Centering window</h2>

<p>
This script centers a window on the screen. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we center a window
# on the screen.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


set width 250
set height 150
set x [expr { ( [winfo vrootwidth  .] - $width  ) / 2 }]
set y [expr { ( [winfo vrootheight .] - $height ) / 2 }]


wm title . "Center" 
wm geometry . ${width}x${height}+${x}+${y}
</pre>

<p>
We need to have the size of the window and the size of the screen 
to position the window in the center of the monitor screen. 
</p>

<pre class="explanation">
set width 250
set height 150
</pre>

<p>
These are the width and height values of the application window.
</p>

<pre class="explanation">
set x [expr { ( [winfo vrootwidth  .] - $width  ) / 2 }]
set y [expr { ( [winfo vrootheight .] - $height ) / 2 }]
</pre>

<p>
Given its width and height, we determine the x, y coordinates for
a centered window.
</p>

<pre class="explanation">
wm geometry . ${width}x${height}+${x}+${y}
</pre>

<p>
The window is placed on the screen.
</p>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# This program creates a quit
# button. When we press the button,
# the application terminates. 
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


button .hello -text "Quit" -command { exit }
place .hello -x 50 -y 50 


wm title . "Quit button" 
wm geometry . 250x150+300+300
</pre>

<p>
We position a <code>button</code> on the window. Clicking on the button will
terminate the application.
</p>


<pre class="explanation">
button .hello -text "Quit" -command { exit }
</pre>

<p>
The <code>button</code> widget is created. The label for the button
is provided with the -text option. The -command option specifies the
procedure to be executed, when the button is pressed. In our case the
application is terminated with the built-in <code>exit</code> command. 
</p>

<pre class="explanation">
place .hello -x 50 -y 50 
</pre>

<p>
We use the <code>place</code> geometry manager to position the button
in absolute coordinates. 50x50px from the top-left corner of the 
root window.
</p>


<img src="/img/gui/tcltk/quitbutton.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>


<h2>Reference</h2>

<p>
The <a href="http://wikipedia.org">wikipedia.org</a> and <a href="http://tcl.tk">tcl.tk</a>
were used to create this tutorial.
</p>


<p>
This section was an introduction to the Tcl/Tk.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified March 12, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

